<template>
  <el-form ref="creditCardForm" :rules="creditCardRules" :model="creditCard" 
    label-position="right" label-width="90px" class="mgt10">
    <el-col :span="10">
      <el-form-item prop="cardNo" label="卡号:">
        <el-input v-model="creditCard.cardNo" />
      </el-form-item>
      <el-form-item prop="bank" label="银行:">
        <el-select v-model="creditCard.bank">
          <el-option v-for="(value, key) in Bank" :key="key" :label="value" :value="key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="owner" label="卡主:">
        <el-input v-model="creditCard.owner" />
      </el-form-item>
      <el-form-item prop="creditLine" label="信用额度:">
        <to-cent-input v-model.number="creditCard.creditLine" />
      </el-form-item>
      <el-form-item prop="balance" label="可用额度:">
        <to-cent-input v-model.number="creditCard.balance" />
      </el-form-item>
      <el-form-item prop="currency" label="结算币种:">
        <el-select v-model="creditCard.currency">
          <el-option v-for="(value, key) in Currency" :key="key" :label="value" :value="key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="paymentLimit" label="每日笔数:">
        <el-input-number v-model="creditCard.paymentLimit" :min="1" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="creditCard.processing" @click="addCreditCard()">
          创建信用卡
        </el-button>
      </el-form-item>
    </el-col>
    <el-col :span="10">
      <el-form-item prop="cardType" label="卡类型:">
        <el-select v-model="creditCard.cardType">
          <el-option v-for="(value, key) in CreditCardType" :key="key" :label="value" :value="key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="有效期:" required>
        <el-col :span="6">
          <el-form-item>
            <el-select v-model="creditCard.validMonth" placeholder="月份">
              <el-option v-for="month in months" :key="month" :label="month" :value="month" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col class="text-center" :span="2">/</el-col>
        <el-col :span="6">
          <el-form-item>
            <el-select v-model="creditCard.validYear" placeholder="年份">
              <el-option v-for="year in years" :key="year" :label="year" :value="year" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item prop="securityCode" label="安全码:">
        <el-input v-model="creditCard.securityCode" placeholder="请输入卡背面的安全码后三位"/>
      </el-form-item>
      <el-form-item prop="d3pd" label="3d code:">
        <el-input type="password" v-model="creditCard.d3pd" />
      </el-form-item>
      <el-form-item prop="priority" label="优先级:">
        <el-select v-model="creditCard.priority">
          <el-option v-for="(value, key) in Priority" :key="key" :label="value" :value="parseInt(key)"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="status" label="状态:">
        <el-select v-model="creditCard.status">
          <el-option v-for="(value, key) in CreditCardStatus" :key="key" :label="value" :value="parseInt(key)"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
  </el-form>
</template>

<script>
import ToCentInput from '@/components/to-cent-input'
import { CreditCard } from '@/store/api'
import * as Constants from '@/constants'

export default {
  components: {
    ToCentInput
  },
  data() {
    return {
      ...Constants,
      creditCard: {
        processing: false,
        priority: 4,
        status: 1,
        cardType: 'JCB',
        currency: 'JPY',
        validMonth: '01',
        validYear: '20'
      },
      months: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
      years: ['18', '19', '20', '21', '22', '23', '24', '25', '26', '27'],
      creditCardRules: {
        cardNo: [
          { max: 32, required: true, message: '长度必须在1-32之间', trigger: 'blur' }
        ],
        owner: [
          { max: 16, required: true, message: '长度必须在1-16之间', trigger: 'blur' }
        ],
        bank: [
          { required: true, max: 32, message: '长度必须在1-32之间', trigger: 'blur' }
        ],
        securityCode: [
          { required: true, max: 3, min: 3, message: '请输入卡背面的安全码后三位', trigger: 'blur' }
        ],
        creditLine: [
          { required: true, message: '请输入信用卡额度' },
          { type: 'number', message: '请输入合法的数值' }
        ],
        balance: [
          { required: true, message: '请输入信用卡可用额度' },
          { type: 'number', message: '请输入合法的数值' }
        ],
        d3pd: [
          { max: 16, message: '长度必须小于16位', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    addCreditCard() {
      this.$refs['creditCardForm'].validate(valid => {
        if (valid) {
          this.creditCard.processing = true
          const payload = Object.assign({}, this.creditCard)
          CreditCard.add(payload).then((creditCard) => {
            // this.$router.push('/credit-card/list')
            this.$alert('信用卡已成功创建', '操作成功', {
              confirmButtonText: '确定',
              callback: action => {
                this.$router.push('/credit-card/list')
              }
            })
          }).catch(() => {
            this.creditCard.processing = false
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
